<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="审批" width="50%" append-to-body>

      <div class="info-title">审批信息</div>
      <el-form :model="form" class="dialog-form-two">
        <el-form-item label="是否通过" prop="remark">
          <el-select v-model.trim="form.pass">
            <el-option :value="true" label="审批通过"></el-option>
            <el-option :value="false" label="审批不通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model.trim="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <div class="info-title">申请信息</div>

      <el-form :model="apply" class="dialog-form-two">
        <el-form-item label="领用人" prop="targetUserId">
          <user-select disabled v-model.trim="apply.targetUserId" placeholder="请输入"></user-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input disabled type="textarea" v-model.trim="apply.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <el-table v-loading="tableData.loading" :data="tableData.list">
        <el-table-column label="名称" prop="name">
          <template #default="scope">
            <el-input disabled placeholder="请输入" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brand">
          <template #default="scope">
            <el-input disabled placeholder="请输入" v-model="scope.row.brand"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="型号" prop="model">
          <template #default="scope">
            <el-input disabled placeholder="请输入" v-model="scope.row.model"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="sub">提交</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import api from "./api.js";
import UserSelect from "@/components/User/UserSelect.vue";

const emptyItem = {
  number: null,
  num: 1,
}

export default {
  components: {UserSelect},
  props: {
  },
  data() {
    return {
      openFlag: false,
      tableData: {
        loading: false,
        list: []
      },
      currentRow: null,
      // 表单信息
      form: {
        taskId: null,
        pass: true,
        remark: null
      },
      // 申请信息
      apply: {
        remark: null
      },
    }
  },
  methods: {
    open(row) {
      this.openFlag = true;
      this.form.taskId = row.task.id;
      api.detail(row.apply).then(response=> {
        Object.assign(this.apply, response);
        this.tableData.list = response.relItems;
      })
    },
    close() {
      this.openFlag = false;
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.close();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        number: null,
        name: null,
        categoryId: null,
        categoryName: null,
        rfid: null,
        brand: null,
        model: null,
        buyWay: null,
        buyTime: null,
        buyPrice: null,
        adminId: null
      };
    },
    handleAdd() {
      this.tableData.list.push({...emptyItem});
    },
    handleDelete({ row, $index }) {
      // 如果是编辑状态需要把删除的行存起来
      if (this.actionType === 'edit') {
        this.deletedItem.push(row);
      }
      this.tableData.list.splice($index, 1);
    },
    /** 提交按钮 */
    sub: function () {
      const params = {...this.form};
      api.sub(params).then(response => {
        this.$emit("sub");
        this.close();
      });
    },
  },
}


</script>

<style lang="scss" scoped>
  .info-title {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 700;
    color: #0b1019;
    padding-left: 10px;
    position: relative;
    margin: 15px 5px;
    &:before {
      content: "";
      width: 2px;
      height: 14px;
      background-color: #005bf5;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: 0;
    }
  }
</style>

